<template>
	<view class="pt-16">
		<view class="form">
			<view class="ipt">
				<text>{{handleLang('真实姓名')}}</text>
				<u--input v-model="form.real_name" placeholderStyle="color:#999999" inputAlign="right" :customStyle="iptStyle" clearable :placeholder="handleLang('请输入真实姓名')" border="none" fontSize="14" color="#222"></u--input>
			</view>
			<view class="ipt">
				<text>{{handleLang('身份证号')}}</text>
				<u--input v-model="form.id_card" placeholderStyle="color:#999999" inputAlign="right" :customStyle="iptStyle" clearable :placeholder="handleLang('请输入有效身份证号')" border="none" fontSize="14" color="#222"></u--input>
			</view>
			<view class="ipt">
				<text>{{handleLang('手机号码')}}</text>
				<u--input :placeholder="userInfo.hide_mobile" placeholderStyle="color:#999999" inputAlign="right" readonly :customStyle="iptStyle" clearable border="none" fontSize="14" color="#222"></u--input>
			</view>
		</view>
		<view class="flex mt-12">
			<w-icon name="hint" size="16"></w-icon>
			<view class="parse">
				<u-parse :content='handleLang(certification)' style="color: #999;"></u-parse>
			</view>
		</view>
		
		<w-toast v-model="showModal" btnType="primary" :title="handleLang('确认提交')" :content="handleLang('实名信息认证后不可修改,请核验信息无误后再提交')" :submitText="handleLang('认证')" @action="changeBtn"></w-toast>
		
		<view class="cert_btn pb-24 plr-16">
			<w-button type="colorful" shape="circle" :disabled="!able" @click="showModal=true">{{handleLang('立即认证')}}</w-button>
			<u-safe-bottom></u-safe-bottom>
		</view>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import { applyCertAuth } from '@/api/user/index.js';
	export default {
		data() {
			return {
				showModal:false,
				iptStyle: {
					'height': '104rpx',
					'padding': '0'
				},
				form:{
					real_name:'',
					id_card:''
				}
			};
		},
		computed: {
			...mapState('config',{
				certification(state){
					return state.info.certification
				}
			}),
			able(){
				if(!this.form.id_card){
					return false
				}
				if(!this.form.real_name){
					return false
				}
				return true;
			}
		},
		methods: {
			...mapActions('user',['getUserInfo']),
			// 认证
			confim() {
				uni.showLoading({
					mask:true,
					title:"实名认证中"
				})
				applyCertAuth(this.form).then(res=>{
					uni.showToast({
						icon:'success',
						title:res.msg
					})
					this.getUserInfo()
					uni.$u.route('/pages/my/certificationStatus',{'status':'1'})
				}).catch(()=>{
					uni.$u.route('/pages/my/certificationStatus',{'status':'0'})
				})
			},
			changeBtn(e) {
				e && this.confim()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 100%;
		background-color: $item-bg-color;
		border-radius: 24rpx;
		@extend .plr-16,.ptb-8;
		
		>.ipt{
			width: 100%;
			@extend .flex-center;
			
			>text{
				font-size: 28rpx;
				@extend .font-color-main-text;
			}
		}
	}
	.font-color-placeholder {
		color: red;
	}
	.parse{
		width: calc(100% - 32rpx);
		padding-left: 20rpx;
	}
	.cert_btn{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
